/* silly user agent styles gives things a blue outline. No longer! */
:focus {
outline: none;
}

/* Please don't forget to credit the creators of these fonts */

@font-face {
    font-family: Metamorphous;
    src: url(fonts/Metamorphous-Regular.ttf);
}
@font-face {
    font-family: Ruslan Display;
    src: url(fonts/RuslanDisplay.ttf);
}
@font-face {
    font-family: Indie Flower;
    src: url(fonts/IndieFlower.ttf);
}
@font-face {
    font-family: HomemadeApple;
    src: url(fonts/HomemadeApple.ttf);
}
@font-face {
    font-family: Schoolbell;
    src: url(fonts/Schoolbell.ttf);
}
@font-face {
    font-family: Lavi;
    src: url(fonts/Lavi.ttf);
}


/* TEST FONTS FOR FEEDBACK */

@font-face {
    font-family: Acme;
    src: url(fonts/test/Acme-Regular.ttf);
}
@font-face {
    font-family: NunitoSans;
    src: url(fonts/test/NunitoSans-Regular.ttf);
}
@font-face {
    font-family: Rubik;
    src: url(fonts/test/Rubik-Regular.ttf);
}
@font-face {
    font-family: VarelaRound;
    src: url(fonts/test/VarelaRound-Regular.ttf);
}
@font-face {
    font-family: PatrickHand;
    src: url(fonts/test/PatrickHand-Regular.ttf);
}
@font-face {
    font-family: Itim;
    src: url(fonts/test/Itim-Regular.ttf);
}

.hdcontainer {
width: 1920px;
height: 1080px;

}

blink {
-webkit-animation: blink 3.5s linear infinite;
-moz-animation: blink 3.5s linear infinite;
animation: blink 3.5s linear infinite;
overflow-x: hidden;
}

.blink {
-webkit-animation: blink 3.5s linear infinite;
-moz-animation: blink 3.5s linear infinite;
animation: blink 3.5s linear infinite;
overflow-x: hidden;
}

@-webkit-keyframes blink {
    0% {opacity:0}
    50%{opacity:1}
	100% {opacity:0}
}

@keyframes blink {
    25% {opacity:0}
    50%{opacity:1}
	75% {opacity:0}
}

.obstacle1 {
width:164px;
height:260px;
}

.obstacle2 {
width:276px;
height:254px;
}

.obstacle3 {
width:128px;
height:315px;
}

.obstacle4 {
width:134px;
height:320px;
}

.obstacle5 {
width:290px;
height:98px;
}

.obstacle {
background-color:#434343;
border-style:solid;
border-radius:20px;
border-width: 1px;
}


.meryll {
pointer-events: none;
}

.meryllshadowforest {
filter:brightness(0);
}

.review {
font-family: sans-serif;
font-size: 10px;
}

.books {
-webkit-column-count:2;
-webkit-column-gap: 65px;
-moz-column-gap: 65px;
-moz-column-count: 2;
column-count:2;
column-gap: 65px;
}

.wendydiary {
font-family: Schoolbell;
}

.arsbook {
font-family: Indie Flower;
font-size: 1.08em;

}

.tippex {
background-color: white;
color: white;
}

.tippex_overwritten {
background-color: white;
color: black;
font-family: Schoolbell;
line-height: 1;
}

.clicktoclose {
    font-size: 26pt;
    /* border-radius: 10px 10px 10px 10px; */
    -moz-border-radius: 10px 10px 10px 10px;
    /* -webkit-border-radius: 10px 10px 10px 10px; */
    border: 3px solid #000000;
    background: #fff;
    padding: 10px;

}

/* The Question Box and Convo styles */

.textOptionDefaultStyle {
color: black;
display: inline-block;
padding: 1px;
padding-right: 4px;
display: block;
}

.textOptionDefaultStyle:hover {
color: #F00;
display: inline-block;
outline: aqua;
outline-style: solid;
outline-width: 2px;
outline-offset: -2px;
}

.Qmeryll1 {
    width: 295px;
    min-height: 60px;
    /* background-color: rgba(212, 219, 255, 0.95); */
    background-image: linear-gradient(to bottom, rgba(253, 251, 237, 0.95) 0%, rgba(247, 239, 195, 0.95) 100%);
    border-style: solid;
    /* border-radius: 10px; */
    padding: 8px;
    transform: rotate(2deg);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
    -webkit-backface-visibility: hidden;

}



/* for the tabs */ 
.questionpanel .gwt-TabBar {


}

.Interrupt-attraction  .textOptionDefaultStyle{
animation: interrupt-animation 2s ease-in-out infinite;
-webkit-animation: interrupt-animation 2s ease-in-out infinite;

}

@keyframes interrupt-animation {
0% {text-shadow: #f00 0px 0px 0px}
50% {text-shadow: #f00 0px 0px 3px, #f00 0px 0px 3px, #f00 0px 0px 3px, #f00 0px 0px 3px, #f00 0px 0px 3px,#f00 0px 0px 3px,#f00 0px 0px 3px,#f00 0px 0px 3px;}
100% {text-shadow: #f00 0px 0px 0px}

}


/* for the individual tab */
.questionpanel .gwt-TabBarItem-wrapper {
padding-right: 10px;
padding-left: 10px;
border-width: 2px;
border-style: none dashed solid none;
font-weight: bold;
color: #A09D89;
}

.questionpanel .gwt-TabBarItem-wrapper-selected {
color: #000000;
}

.questionpanel .gwt-TabBarItem-wrapper:hover {
color:red;
border-color: aqua;
}


.questionpanel .gwt-TabBar > tbody > tr > td:nth-last-child(2) {
border-style: none none solid none;
}


/* 00000000000000  */

.backbutton_theroom {
position: absolute;
left: 50px;
bottom: 100px;
}

.borderoverlay {
background-color: #fff;
background-image: url(../GameTextures/rezChart.jpg);
background-position:center;
opacity: 0.5;
}

.bookcase {
background-color: #000;

}

.pc_whiteback {  background-color:#ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-style: solid;
border-radius: 5px;
padding: 15px;
-webkit-box-shadow:  1px 1px 2px 3px rgba(00, 00, 00, 0.5);
box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, 0.5);


}

.computer {
   
  background-color:#A7A377;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 padding: 15px;
 opacity:0.8;
  filter:alpha(opacity=80); /* For IE8 and earlier */
   -webkit-box-shadow: 0px 0px 20px 3px #A7A377;
 box-shadow: 0px 0px 20px 3px #A7A377;
}



.HeldItemBox {
background: -moz-radial-gradient(center, ellipse cover,  rgba(40,0,0,0.63) 0%, rgba(124,0,0,0.65) 25%, rgba(255,79,79,0.67) 54%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.18) 59%, rgba(0,0,0,0) 73%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(40,0,0,0.63)), color-stop(25%,rgba(124,0,0,0.65)), color-stop(54%,rgba(255,79,79,0.67)), color-stop(58%,rgba(0,0,0,0.28)), color-stop(59%,rgba(0,0,0,0.18)), color-stop(73%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(40,0,0,0.63) 0%,rgba(124,0,0,0.65) 25%,rgba(255,79,79,0.67) 54%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.18) 59%,rgba(0,0,0,0) 73%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(40,0,0,0.63) 0%,rgba(124,0,0,0.65) 25%,rgba(255,79,79,0.67) 54%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.18) 59%,rgba(0,0,0,0) 73%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(40,0,0,0.63) 0%,rgba(124,0,0,0.65) 25%,rgba(255,79,79,0.67) 54%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.18) 59%,rgba(0,0,0,0) 73%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(40,0,0,0.63) 0%,rgba(124,0,0,0.65) 25%,rgba(255,79,79,0.67) 54%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.18) 59%,rgba(0,0,0,0) 73%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1280000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


.plugcord {
fill: transparent;
fill-opacity: 1;
fill-rule: nonzero;
stroke: rgb(51, 51, 51);
stroke-width: 4.5;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-dashoffset: 0;

}



.the_end {
font-size: 16px;
font-weight: bold;
background-color: #ffffff;
background-image: radial-gradient(circle farthest-corner at left top, #e2e9f2 0%, #8AB9F2 100%);
padding: 10px 10px 10px 10px;
box-shadow: 3px 3px 0px 1px rgba(00, 00, 00, 0.7);
border-style: solid;
}

/* UI designs */

.menupopup .gwt-MenuBar {
border-radius: 10px 10px 10px 10px;
background-image: linear-gradient(to bottom, #FDFBED 0%, #f7efc3 100%);
box-shadow: rgba(0,0,0,0.7) 2px 2px 0px;
border-style: solid;
}

.scoredisplay {
z-index: 999999;
position: absolute;
font-size: 200%;
left: 15%;
top: 3%;
color: #f30932;
text-shadow: 3px 2px 2px #e22ecc;
}

.scorefloating {
z-index: 999999;
position: absolute;
font-size: 200%;
color: #f30932;
text-shadow: 3px 2px 2px #000;
}

.scoredisplayupdater-size {
animation: growlarger 3s linear 1;
}
.scoredisplayupdater-color {
animation: fancyglow 3s linear 1;
}
.scoredisplayupdater-reset {
animation: growsmaller 0.5s linear 1;
}

@keyframes tadaaa {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes floop0 {
0% {
	left: 0px; 
	top: 0px;
	}

5% {
	left: 22px; 
	top: -22px; 
}	
	
10%  {
	left: 44px; 
	top: -44px; 
	}
	
15% {
	left: 66px; 
	top: -22px; 
	opacity: 1;
}	
	
100% {
	left: 100px; 
	top: 50px; 
	opacity: 0;
	}
}

@keyframes floop1 {
0% {
	left: 0px; 
	top: 0px;
	}

5% {
	left: 10px; 
	top: -33px; 
}	
	
50%  {
	left: 22px; 
	top: -60px; 
	opacity: 1;
	}


100% {
	left: 44px; 
	top: -44px; 
	opacity: 0;
	}
}

@keyframes floop2 {
0% {
	left: 0px; 
	top: 0px;
	}

5% {
	left: -10px; 
	top: -22px; 
}	
	
20%  {
	left: -44px; 
	top: -22px; 
	}
	
40% {
	left: -66px; 
	top: -10px; 
	opacity: 1;
}	
	
100% {
	left: -15px; 
	top: 33px; 
	opacity: 0;
	}
}

@keyframes floop3 {
0% {
	left: 0px; 
	top: 0px;
	}
	
10%  {
	left: -11px; 
	top: -11px; 
	}
	
50% {
	left: -40px; 
	top: -0px; 
	opacity: 1;
}	
	
100% {
	left: -66px; 
	top: 30px; 
	opacity: 0;
	}
}

@keyframes floop4 {
0% {
	left: 0px; 
	top: 0px;
	}

5% {
	left: -5px; 
	top: -22px; 
}	
	
10%  {
	left: -15px; 
	top: -44px; 
	}
	
15% {
	left: -25px; 
	top: -66px; 
}	
	
30% {
	left: -55px; 
	top: -77px; 
	opacity: 1;
	}
	
100% {
	left: -88px; 
	top: -44px; 
	opacity: 0;
	}
}

.tadaaa {
  -webkit-animation-name: tadaaa;
  animation: tadaaa 1s 1;
}

.floop0 {
position: relative;
  animation: floop0 3.5s ease-in 1;
}

.floop1 {
position: relative;
  animation: floop1 1s ease-in 1;
}

.floop2 {
position: relative;
  animation: floop2 2s ease-in 1;
}

.floop3 {
position: relative;
  animation: floop3 2.5s ease-in 1;
}

.floop4 {
position: relative;
  animation: floop4 3.5s ease-in 1;
}



.flashyappear {
animation: flashyappear 3s ease-out 1;
}

@keyframes flashyappear {
0% {filter: brightness(100%);}
25% {filter: brightness(200%);}
100% {filter: brightness(100%);}
}

@keyframes growlarger {
0% {font-size: 150%}
100% {font-size: 300%}
}

@keyframes growsmaller {
0% {font-size: initial}
100% {font-size: 150%}
}

@keyframes fancyglow {
0% {filter: hue-rotate(0deg);}
25% {filter: hue-rotate(90deg);}
50% {filter: hue-rotate(180deg);}
75% {filter: hue-rotate(210deg);}
100% {filter: hue-rotate(360deg);}
}

.NextArrow {
color: white;
text-shadow: #000 2px 2px 2px, #000 2px 2px 2px, #000 2px 2px 2px, #000 0px 0px 2px, #000 0px 0px 2px,#000 0px 0px 2px,#000 0px 0px 2px,#000 0px 0px 2px;
}

.NextArrowVector {
fill: #FFF4B5;
fill-opacity: 1;
fill-rule: nonzero;
stroke: rgb(51, 51, 51);
stroke-width: 2.5;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-dashoffset: 0;

}

.Interrupt_Button {
opacity:0.69911505;
fill:#ffff54;
fill-opacity:1;
fill-rule:nonzero;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:4;
stroke-opacity:1;
stroke-dasharray:none;
stroke-dashoffset:0
}

.Interrupt_Mark {

}

/* Dialogues */

.dialogue_demon {
font-family: Metamorphous;
background: -webkit-linear-gradient(top, #F8C236 0%,#F7A24C 30%,#6d0019 100%);
border-style: outset;
border-color: darkgoldenrod;
background-color:#ffdbdb;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px 10px 10px 10px;
-webkit-box-shadow:  1px 1px 2px 3px rgba(00, 00, 00, 0.5);
box-shadow:  1px 1px 2px 3px rgba(00, 00, 00, 0.5);
position: relative;
}

.dialogue_demon_animation {
position: relative;
animation: interrupt-animation 2s ease-in-out infinite;
-webkit-animation: TextGlitch 2s ease-in-out infinite;
}
@-webkit-keyframes TextGlitch {
0% {text-shadow: 0 0 1px #000;}
25% {left: 5px;transform: scaleX(1.1) scaleY(1.1);}
28% {top: 5px;}
30% {left: -5px;transform: scaleX(1.0) scaleY(1.0);}
49% {top: 0px;}
50% {left: 0px; text-shadow: 0 0 1px #000;}
53% {left: 30px;transform: scaleX(1.1) scaleY(1.1);}
55% {left: -10px;}
57% {left: 0px;transform: scaleX(1.0) scaleY(1.0);}
65% {left:0px; top:0px;}
66% {left:10px; top:50px;transform: scaleX(1.1) scaleY(1.1);}
67% {left:0px; top:-10px;}
68% {left:0px; top:0px;}
75% {text-shadow: 0 0 5px #ff0000; transform: scaleX(1.1) scaleY(1.1);}
76% {left: -5px;transform: scaleX(1.0) scaleY(1.0);}
80% {top: -5px;}
86% {left: 5px;transform: scaleX(1.1) scaleY(1.1);}
91% {top: 5px;}
100% {text-shadow: 0 0 1px #000;transform: scaleX(1.0) scaleY(1.0);}
}



.dialogue_right {
padding: 10px 120px 10px 10px;
}

.dialogue_people {
border-style: solid;
background-color:#ffffff;
border-radius: 10px;
box-shadow:  1px 1px 2px 1px rgba(00, 00, 00, 0.7);
min-height: 100px;
width: 300px; 
font-family: Lavi;
font-size: 14pt;
line-height: 1.2;
}

.dialogue_right_funny {
border-style: solid;
 background-color:#c0c0c0;
 color: #800000;
 text-decoration: bold;
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 padding: 10px 100px 10px 10px;
}

.dialogue_left
{
 padding: 10px 10px 10px 120px;
}

.dialogue_option {
color: #000000;
text-decoration: underline;
}

.dialogue_option_hover
{
text-decoration: underline;
color: #ff0000;
}

.dialogue_unfocus {
opacity: 0.7 !important;
}

.usedtextoption {
color: #ccc;
}

.usedtextoption:hover {
text-decoration: underline;
}

.hackingText {
font-family: monospace !important; 
}

/* dialogues for the dialogue test */

.dialogue_adyne {

}

.dialogue_holvert{

}


.choice_holvert {
color: green;
margin: 5px;
}

.choice_holvert:hover {
text-decoration: underline;

}

.creditpaneltext {
color: #fff;
text-align: center;
width: 360px
}

.credittitle {
font-weight: bold;
}

.creditstable  {
color: #fff;}

.creditstable td {
width: 148px;
padding-left: 25px;
}

.creditstable tr {
color: #fff;}

.remark_right {
color: #ffffff;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,2px 2px 2px #000;
font-family: 'Source Sans Pro', sans-serif;
font-size: 25px;
}

.remark_crunch {
color: #ffffff;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,2px 2px 2px #000;
font-family: 'Hanalei Fill', cursive;
font-size: 25px;
}

.remark_ouch {
color: #ffffff;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,2px 2px 2px #000;
font-family: 'Bangers', cursive;
font-size: 30px;
}

.placecrunch {
left: 30;
}

.end_resetter {
padding: 10px;
 text-decoration: bold;
font-size: 24px;
}

.title_CookieCollection{

color: red;
font-weight: bold;
font-size: larger;

}

.title_CookieCollection:hover{

color: white;

}

.cookieCollection_goBack
{
color: red;
font-weight: bold;
font-size: larger;
}

.goBack_hover
{
color: white;
font-weight: bold;
font-size: larger;
}

.cookieCollection_goBack:hover
{
color: white;
}

.cookieSolutionBack
{
  width: 330px;
  height: 70px;
  color: black;
  outline: #130606;
  outline-width: 2px;
  outline-style: solid;
  box-shadow: -5px 5px 15px #000;
  background: -moz-radial-gradient(center, ellipse cover,  #ffffba 0%,
#ffc66b 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffffba', endColorstr='#ffc66b',GradientType=1 );
  background: -moz-radial-gradient(center, ellipse cover,  #fceab8 0%,
#ffbb56 99%); /* FF3.6-15 */
   filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#fceab8', endColorstr='#ffbb56',GradientType=1 );
   background: -moz-radial-gradient(center, ellipse cover,  #fcdbae
0%, #ffb247 99%); /* FF3.6-15 */
   background: radial-gradient(ellipse at center,  #fcdbae 0%,#ffb247
99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#fcdbae', endColorstr='#ffb247',GradientType=1 );
 }

.cookieCollection_solution
{
  color: #000;
font-size: larger;
font-family: Lavi;
 font-weight: bold;
 font-variant: small-caps
 }

.cookieCollection_solutionDiscription {

font-family: Lavi;
font-variant: small-caps;
font-size: large;
font-weight: bold;
line-height: 90%;
margin-top: 5px;

}
.cookieCollection_solutionDiscription:first-letter{
 font-size:larger;
 font-size:122%;
  }

.cookieCollection_solution:first-letter{
 font-size:122%;

 font-weight: bolder;
}

.cc_solved {

width: 330px;
height: 70px;
color:black;
background:white;
outline: #5C0000;
outline-width: 4px;
outline-style: groove;

}

.black {
 background-color:black;
}

.text_highlight {
background: linear-gradient(221deg, #000 0%, #000 70%, #ffde01 73%, #000 76%, #000 100%);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


-webkit-animation: textshift 3s ease infinite;
-moz-animation: textshift 3s ease infinite;
animation: textshift 3s ease infinite;
}

@-webkit-keyframes textshift {
    0%{background-position:99% 0%}
    100%{background-position:0% 100%}
   
}
@-moz-keyframes textshift {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@keyframes textshift { 
    0%{background-position:99% 0%}
    100%{background-position:0% 100%}
    
}



/*

-webkit-animation: text-highlight-animation 4s infinite linear;
animation: text-highlight-animation 4s infinite linear;
-moz-animation: text-highlight-animation 4s infinite linear;
-o-animation: text-highlight-animation 4s infinite linear;
-ms-animation: text-highlight-animation 4s infinite linear;
}



@keyframes text-highlight-animation {
0% {color: #000;}
80% {color: #000;}
85% {color: #ffde01;}
90% {color: #000;}
100% {color:#000}
}
*/

.computer_cookie_menuoption {
color: #000000;
text-decoration: underline;
}

.computer_cookie_menuoption_hover
{
text-decoration: underline;
color: #ff0000;
}

@keyframes creditcarduse_animation {
from { color: #000000; text-shadow: 0px 0px 0px #ff0000, -0px 0px 0px #ff0000, -0px -0px 0px #ff0000, 0px -0px 0px #ff0000;}
to { color: #000000; text-shadow: 2px 2px 3px #ff0000, -2px 2px 3px #ff0000, -2px -2px 3px #ff0000, 2px -2px 3px #ff0000;}
}

@-webkit-keyframes creditcarduse_animation {
from { color: #000000; text-shadow: 0px 0px 0px #ff0000, -0px 0px 0px #ff0000, -0px -0px 0px #ff0000, 0px -0px 0px #ff0000;}
to { color: #000000; text-shadow: 0px 0px 3px #ff0000, -0px 0px 3px #ff0000, -0px -0px 3px #ff0000, 0px -0px 3px #ff0000;}
}

.textmanip {

animation:creditcarduse_animation 2s ease-in-out infinite;
-webkit-animation: creditcarduse_animation 2s ease-in-out infinite;
}

.textmanip_hover 
{
text-decoration: underline;
color: #ff0000;
}

.inventory {   
background: #a68bff; /* Old browsers */
background: -moz-linear-gradient(45deg,  #a68bff 70%, #91a1ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(70%,#a68bff), color-stop(100%,#91a1ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #a68bff 70%,#91a1ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #a68bff 70%,#91a1ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #a68bff 70%,#91a1ff 100%); /* IE10+ */
background: linear-gradient(45deg,  #a68bff 70%,#91a1ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a68bff', endColorstr='#91a1ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }	

.InventoryIcon {
transition-duration: 0.5s;
transform: rotateZ(0deg);
background: none;

}		

.InventoryIcon:hover {
/*
animation: iconhover 2s ease-in-out 1;
-webkit-animation: iconhover 2s ease-in-out 1;
*/
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
transform: rotateZ(20deg);
}

@keyframes iconhover {
from {transform:rotate(0deg);}
to {transform:rotate(25deg);}
}

@-webkit-keyframes iconhover {
from { color: #000000; text-shadow: 0px 0px 0px #ff0000, -0px 0px 0px #ff0000, -0px -0px 0px #ff0000, 0px -0px 0px #ff0000;}
to { color: #000000; text-shadow: 0px 0px 3px #ff0000, -0px 0px 3px #ff0000, -0px -0px 3px #ff0000, 0px -0px 3px #ff0000;}
}

/* this is only applied if the icon is being dragged */
.InventoryIcon-dragging {
background: none !important;

}

 /* this prevents firefox' ghosting images when dragging a inventory icon */
.InventoryIconInner{
pointer-events: none;

}
.InventoryIconInner:hover{
pointer-events: none;

}
.InventoryIconInner-dragging{
pointer-events: none;

}



.inventoryitem {
	position: relative;
	float: left;
	top: 0;
	left: 0; 
    width: 127px;
}

.inventory_concepts {
 float: left;
}

.moreoptions {
background-image: url(../GameIcons/moreoptions.png);
background-repeat: no-repeat;
background-position: 95% 6%;
}

.itempicked {

z-index: 15;
position: absolute;
left: 50%;
top: 50%;

/* Removed these two margins to make the icon easier to access and not confuse it with clicking on the actual backpack
margin-top: -33px;
margin-left: -40px;
*/
}

.removeIcon:hover {
color: red;
}
.removeIcon {
width: 20px;
height: 20px;
position: absolute;
left: 82px;
border: solid;
border-color: black;
border-width: 1px;
color: rgb(253, 253, 253);
background: rgb(69, 39, 255);
}

/*  For the inventory button help highlighter  */
.swing {
animation: swing 3.5s linear infinite;
overflow-x: hidden;
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

/* */

.bookpostioner {
position: absolute;
}

.booktextpostioner {
position: absolute;
pointer-events: all;
}

.appearbackto {
    left: 357px;
    top: -327px;
    position: relative;
}
.appearbooksbackto {
    left: 0px;
    top: 309px;
    position: relative;
}

/* UI */

.instructions {
font-family: lavi;
color: red;
font-size: 22pt;
position: fixed;
bottom: 6%;
left: 1%;
width: 659px;
height: 121px;
z-index: 9000;
pointer-events: none;
font-weight: bold;
text-shadow: 0px 0px 1px white, 0px 0px 2px white, 0px 0px 3px white, 0px 0px 4px white, 0px 0px 5px white, 0px 0px 6px white, 0px 0px 6px white;
}

.bottomdiv {
position: fixed;
bottom: 3%;
right: 2%;
float: left;
width: 178px;
height: 50px;
z-index: 9000;
}

.resetdiv {
position: fixed;
bottom: 3%;
right: 2%;
float: left;
width: 178px;
height: 50px;
z-index: 9000;
}

.LoadingFillStyle {
color:pink;
}

.picturePopUp {   background-color: #663300; }
.popup_border { border: ridge thick #999}

.image80per   { position: absolute;  width: 100%; height: auto }


.Feedback  { color: #000; font-size: larger; padding: 3px; }

.MessageHistoryReplyStyle { color: #1a7; font-size: smaller;}
.Scroll {  background-image: url(../GameTextures/Scrolltexture.jpg)  }
.DefaultTopBar  { color: #ffffff;  background-color: rgb(43, 138, 226);}
.notepadback  {  background-image: url(../GameTextures/NotepadBackground.jpg) }
.secretsback { background-image: url(../GameTextures/eiachtergrondc.jpg) };

.strike_blue { background-color: #8691ca }
.strike_white { background-color: #dff3ff }
.strike_purple { background-color: #6d6288 }

.ShadowLower  { background-color: #a68bff}
.ShadowCorner {background-color: #a68bff }
.ShadowLeft  { background-color: #a68bff }
.ShadowRight  { background-color: #91A1FF }
.ShadowTopLeft  {
background-color: rgb(43, 138, 226);
 }

.ShadowBottomRight  {background-color: #a68bff } 

.bold { font-weight: Bold }

.overflowhide { overflow: hidden };

.chapterlist_tab { background: #c27676; text-align: left; margin: 3px 3px 3px 0; padding: 5px 10px 5px 0; left: 3px }
.chapterlist_tab_selected   { background: #800000; text-align: left; margin: 3px 3px 3px 0; padding: 5px 10px 5px 0; left: 3px }

.chapterlist_tab_tr    { background: url(../images/corner.png) no-repeat -6px -55px; margin-left: -6px; width: 12px; height: 67px; overflow: hidden }
  
.chapterlist_tab_br   { background-image: url(../images/corner.png) }

.standard_message    { /* background-color: #fc9; background-image: url(../GameTextures/Background.jpg); background-repeat: repeat; background-position: 0 100%; */ width: 100%; height: 100% }
.standard_message_back     { /* background-color: #fc9; background-image: url(../GameTextures/Background.jpg); background-repeat: repeat; background-position: 0 100%; 
text-align: center */  }

.mesagePopUps { background-color: #ffc; padding: 3px; border: solid 2px #900;text-align: center;  filter: alpha(opacity=75); opacity: 0.75 }

.musicControllcontainer { color: #ffffff;  background-image:url(../GameTextures/cuypersfm.jpg) }

.Inspector-TabBar {
}

.Inspector-TabBar .gwt-TabBarFirst {
  width: 5px;  /* first tab distance from the left */
}

.Inspector-TabBar .gwt-TabBarRest {
}

.Inspector-TabBar .gwt-TabBarItem {
  padding: 3px 4px 2px 4px;
  cursor: pointer;
  cursor: hand;
  color: #666666;
  font-weight: bold;
  background: white url(images/tab.gif) no-repeat right top;
  margin-left: 6px;    /* Size of right image, used for sliding window */
  padding-right: 10px; /* +6px to balance margin-left */
  text-align: center;
}

.Inspector-TabBar .gwt-TabBarItem-wrapper {
  padding: 0px;
  background: white url(images/tab.gif) no-repeat left top;
  border-left: 5px solid white; /* Spacing between tabs */
}

.Inspector-TabBar .gwt-TabBarItem-selected {
  cursor: default;
  color: black;
  background: white url(images/tab.gif) no-repeat right -100px;
}

.Inspector-TabBar .gwt-TabBarItem-wrapper-selected {
  background: white url(images/tab.gif) no-repeat left -100px;
}

.CurrentSaveIcon {
outline: #8C1313;
outline-offset: 0px;
outline-style: dashed;
}


.SaveIconBack {
background-color: rgb(239, 187, 221);
}

.SaveIconBack:hover {
background-color: rgb(210, 210, 252);
}

.SaveIconLabel {
text-shadow: -1px 1px 3px rgba(0, 0, 0, 0.34);
font-family: crafty girls;
font-weight: bolder;
font-kerning: 0.1;
letter-spacing: 1px;
width:100px;
text-align:center;
}

.loadsavegameboxinner {
background-color: #a68bff;
}

.savegame_button {
background-image: url(../GameIcons/Savestate0.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.savegame_button:hover {
background-image: url(../GameIcons/Savestate1.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.restoregame_button {
background-image: url(../GameIcons/Restorestate0.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.restoregame_button:hover {
background-image: url(../GameIcons/Restorestate1.png);
height: 62px;
width: 63px;
position: relative;
float: left;

}.helpscreen_button {
background-image: url(../GameIcons/helpscreen0.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.helpscreen_button:hover {
background-image: url(../GameIcons/helpscreen1.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.helpscreen_save {
background-image: url(../GameIcons/Savestate0.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.helpscreen_save:hover {
background-image: url(../GameIcons/Savestate1.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.helpscreen_load {
background-image: url(../GameIcons/Restorestate0.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}

.helpscreen_load:hover {
background-image: url(../GameIcons/Restorestate1.png);
height: 62px;
width: 63px;
position: relative;
float: left;
}


.gwt-PopupPanel {

box-shadow: 5px 5px 30px #000;
clip: auto !important;
border-color: rgb(162, 0, 0);
border-style: ridge;
}

.gwt-DecoratedTabBar .gwt-TabBarRest {
}
.gwt-DecoratedTabBar .gwt-TabBarItem {
  border-collapse: collapse;
  margin-left: 6px;
}

.gwt-DecoratedTabBar .tabTopCenter  { background-image: url(../widgetimages/bup.png); padding: 0;  height: 15px; }
.gwt-DecoratedTabBar .tabTopLeft,
.gwt-DecoratedTabBar .tabTopRight {
  padding: 0px;
  zoom: 1;
}
.gwt-DecoratedTabBar .tabTopLeftInner{
 background-image: url(../widgetimages/upleft.png);
  width: 15px;
  height: 15px;
  overflow: hidden;
}
.gwt-DecoratedTabBar .tabTopRightInner {
  background-image: url(../widgetimages/upright.png);
  width: 15px;
  height: 15px;
  overflow: hidden;
}
.gwt-DecoratedTabBar .tabMiddleLeft{
  width: 15px;
  height: 15px;
  overflow: hidden;
  background-image: url(../widgetimages/left.png);
}
.gwt-DecoratedTabBar .tabMiddleRight {
  width: 15px;
  height: 15px;
  overflow: hidden;
  background-image: url(../widgetimages/bright.png);
}
.gwt-DecoratedTabBar .tabMiddleLeftInner,
.gwt-DecoratedTabBar .tabMiddleRightInner {
  width: 15px;
  height: 15px;
}
.gwt-DecoratedTabBar .tabMiddleCenter {
  padding: 1px 1px 1px 1px;
  background-image: url(../widgetimages/yellowback.png);
  cursor: pointer;
  cursor: hand;
  color: black;
  font-weight: bold;
  text-align: center;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
  background-image: url(../widgetimages/bupf.png);
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft{
  background-image: url(../widgetimages/leftf.png);
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight {
  background-image: url(../widgetimages/brightf.png);
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter {
  cursor: default;
  background: #fbf7e0;
}

* html .gwt-DecoratedTabBar .tabTopLeftInner {
  width: 15px;
  height: 15px;
  background-image: url(../widgetimages/upleft.png);
}

* html .gwt-DecoratedTabBar .tabTopRightInner {
  width: 15px;
  height: 15px;
  overflow: hidden;
  background-image: url(../widgetimages/upright.png);
}

* html .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeftInner {
  width: 15px;
  height: 15px;
  overflow: hidden;
  background-image: url(../widgetimages/upleftf.png);
}
* html .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRightInner {
  width: 15px;
  height: 15px;
  background-image: url(../widgetimages/uprightf.png);
}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {

  overflow: hidden;
  padding: 0px }

.fader { z-Index: 1010; background-color: #171d18; width: 100%; height: 100%; filter: alpha(opacity=65); opacity: 0.65 }

.overlay { background-color: black}

.backgroundtexture1 { }
.backgroundtexture2 { }
.backgroundtexture3 { }

.hackerstyle { color: #093; width: 100%; height: 100% }

.gwt-PopupPanelGlass {
  background-color: #000;
  opacity: 0.8;
 z-index: 99999;
}

.popup {
  background-color: gray;
  border-color: gray gray gray gray;
  border-width: 1px 4px 4px 1px;
  border-style: solid solid solid solid;
}
 
.popup-item {
font-weight: normal;
font-size: 120%;
border-radius: 10px 10px 10px 10px;
border-width: 0px 0px 1px 0px;
border-style: dashed;

}

.menupopup {
padding-right: 2px;
padding-bottom: 2px;
}

.menupopup tr:last-child td{
border-style: none;
}



.defaultOverlayStyle{
    background-color: blue;	
  opacity: 0.5;
}

.smoke {
  background-image: url(../GameTextures/SmokeOverlay.png);	

}

.darkness {
  background-color: black;	
  opacity: 0.5;

}

.Lightbeam {
  background-image: url(Lightbeam.png);	

}

.transparant {
pointer-events: visible;
opacity: 0;
}

.fadeinfix {
	opacity: 0 !important;
}

.dragdrop-handle { 
cursor: cell;
 }


html, body { 
height: 100%;
margin: 0; 
padding: 0;
                scrollbar-arrow-color: #2F4B39;
                scrollbar-track-color: #FDF0CE;
                scrollbar-darkshadow-color:black;
                scrollbar-face-color:#466954;
                scrollbar-highlight-color:#609374;
                scrollbar-shadow-color:#2F4B39;
}

.CBlocation {
    position: absolute;
    width: 100%;
    Height: 100%;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* -webkit-transform: translate(-50%, -50%); */
    -ms-transform: translate(-50%, -50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Introscreen */

.introscreen_title {
text-align: center;
font-size: 14pt;
font-weight: bold;
margin-bottom: 11px;
}

.introscreen_maintext {
font-weight: bold;
}

.introscreen_maintext div {
margin-bottom: 12px;
height: 45px;
}

.introscreen_image {
border: 1px solid #000000;
margin-right: 7px;
}

.introscreen_innerdiv {
background-color: #f9676766;
padding: 5px;
border-radius: 4px;
}

.startgame{
text-align: center;
font-size: 35px;
color: #fff;
-webkit-text-stroke: 9px red;
paint-order: stroke fill;
border: 3px solid #000;
padding: 9px;
border-radius: 19px;
background: bisque;
} 

.startgame:hover{
transition: background-color 0.5s ease, color 0.5s ease, -webkit-text-stroke 0.5s ease;
color: #6790f9;
background-color: #072895;
-webkit-text-stroke: 5px #000;
}

.tryagain {
text-align: center;
color: #fff;
-webkit-text-stroke: 4px #ff0048;
paint-order: stroke fill;
}

.tryagain:hover {
transition: color 0.5s ease, -webkit-text-stroke 0.5s ease;
color: #6790f9;
-webkit-text-stroke: 4px #000;
}

/* Help screen CSS */

.helpscreen {
pointer-events: all;
/*border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;*/
border: 3px solid #f9676766;
color: #000;
padding: 15px;
    /* background-color: #f7efc3; */
    background-image: linear-gradient(to bottom, #FDFBED 0%, #f7efc3 100%);

-webkit-box-shadow: 4px 3px 0px 0px rgba(00, 00, 00, 0.7);
box-shadow: 4px 3px 0px 0px rgba(00, 00, 00, 0.7);
font: Lavi;
}

.helpscreentitle {
font-size: 14pt;
font-weight: bold;
}



.newtip {
    border: 1px solid #000000;
    background: #ffbb75;
    background-image: -webkit-linear-gradient(top, #ffbb75, #9e5e17);
    background-image: -moz-linear-gradient(top, #ffbb75, #9e5e17);
    background-image: -ms-linear-gradient(top, #ffbb75, #9e5e17);
    background-image: -o-linear-gradient(top, #ffbb75, #9e5e17);
    background-image: linear-gradient(to bottom, #ffbb75, #9e5e17);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 25px;
    font-family: Lavi;
    /* color: #ffffff; */
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    
}

.newtip:hover {
  color: #fff;
  background: #9e5e17;
  background-image: -webkit-linear-gradient(top, #9e5e17, #ffbb75);
  background-image: -moz-linear-gradient(top, #9e5e17, #ffbb75);
  background-image: -ms-linear-gradient(top, #9e5e17, #ffbb75);
  background-image: -o-linear-gradient(top, #9e5e17, #ffbb75);
  background-image: linear-gradient(to bottom, #9e5e17, #ffbb75);
  text-decoration: none;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.resetscenebutton {
  background: #d93434;
  background-image: -webkit-linear-gradient(top, #d93434, #b82b2b);
  background-image: -moz-linear-gradient(top, #d93434, #b82b2b);
  background-image: -ms-linear-gradient(top, #d93434, #b82b2b);
  background-image: -o-linear-gradient(top, #d93434, #b82b2b);
  background-image: linear-gradient(to bottom, #d93434, #b82b2b);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Lavi;
  color: #ffffff;
  font-size: 15pt;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 2px;
  text-decoration: none;
  text-align: center;
  box-shadow: 2px 2px 3px #000, 0px 0px 6px #000, 0px 0px 6px #000, 0px 0px 4px #000, 0px 0px 5px #000, 0px 0px 6px #0000, 0px 0px 7px #fff, 0px 0px 8px #fff
}

.resetgametext {
font-weight: bold;
font-size: 20pt;
}

.floatfix {
float: left;
position: fixed;
}

.resetscenebutton:hover {
  background: #fc3c3c;
  background-image: -webkit-linear-gradient(top, #fc3c3c, #d93434);
  background-image: -moz-linear-gradient(top, #fc3c3c, #d93434);
  background-image: -ms-linear-gradient(top, #fc3c3c, #d93434);
  background-image: -o-linear-gradient(top, #fc3c3c, #d93434);
  background-image: linear-gradient(to bottom, #fc3c3c, #d93434);
  text-decoration: none;
}

.gameplaytips{
text-align: center;
color: red;
font-weight: bold;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #000000;
padding: 10px;

}

.helptextarea {
padding-left: 15px;
}

.helptinytext {
font-size: 7pt;
}

.backtotitle{
font-size: 20px;
color: #fff;
text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
} 

.backtotitle:hover{
text-decoration: underline;
}

/** Bomb effect **/

.shake {
	-webkit-animation-name: bigbombshake;
	-webkit-animation-duration: 0.4s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}


@-webkit-keyframes bigbombshake {
	0% { -webkit-transform: translate(4px, 2px) rotate(0deg) scale(1.1,1.1); } 
	20% { -webkit-transform: translate(-6px, 0px) rotate(2deg) scale(1.0,1.0); }
	40% { -webkit-transform: translate(2px, -2px) rotate(2deg) scale(1.0,1.0); }
	60% { -webkit-transform: translate(-6px, 2px) rotate(0deg) scale(1.1,1.1); }
	80% { -webkit-transform: translate(-2px, -2px) rotate(2deg) scale(0.9,0.9); }
	100% { -webkit-transform: translate(2px, -4px) rotate(-2deg) scale(1.1,1.1); }
}


/* End */

/* Hightlighter */

.highlight {
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,0,0,0) 70%, rgba(255,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,0,0,1) 0%,rgba(255,0,0,0) 70%,rgba(255,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,0,0,1) 0%,rgba(255,0,0,0) 70%,rgba(255,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.highlightconcept {

background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,0,1) 0%, rgba(255,0,0,0) 70%, rgba(255,0,0,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,0,1) 0%,rgba(255,0,0,0) 70%,rgba(255,0,0,0) 100%); 
background: radial-gradient(ellipse at center,  rgba(255,255,0,1) 0%,rgba(255,0,0,0) 70%,rgba(255,0,0,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#00ffffff',GradientType=1 );

animation: highlightcon 1.5s ease-in-out infinite alternate;
}

.attention {
  -webkit-animation: attentionani 1.5s ease-in-out infinite alternate;
  -moz-animation: attentionani 1.5s ease-in-out infinite alternate;
  animation: attentionani 1.5s ease-in-out infinite alternate;
}

@keyframes highlightcon {
  0% {
  transform: rotateZ(20deg);
  }
  
  50% {
  transform: rotateZ(-20deg);
  }
  
  100% {
  transform: rotateZ(20deg);
  }
}

@keyframes attentionani {
  0% {
    filter: sepia(0) saturate(2);
  }
  
  50% {
    filter: sepia(1) saturate(8);
  }
  
  100% {
    filter: sepia(3) saturate(2);
  }
}

.helppointer {
/*font-family: lavi;
font-size: 14pt;
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
*/  

width: 200px;
position: absolute;
left: 174px;
top: 17px;
}

.panicwave1 {
position: relative;
animation:panic-animation 2s ease-in-out infinite;
-webkit-animation:panic-animation 2s ease-in-out infinite;
}

.panicwave2 {
position: relative;
animation:panic-animation 2s ease-in-out infinite;
-webkit-animation:panic-animation 2s ease-in-out 0.5s infinite;
}

@keyframes panic-animation {
0% {top: -200px; left: -105px;}
20% {top: -200px; left: -105px;}
21% {top: -170px; left: -90px;}

40% {top: -170px; left: -90px;}
41% {top: -100px; left: -150px;}

60% {top: -100px; left: -150px;}
61% {top: -190px; left: -150px;}

80% {top: -190px; left: -150px;}
81% {top: -180px; left: -50px;}

99% {top: -180px; left: -50px;}
100% {top: -200px; left: -105px;}
}

#closeallwindowsbox {
display: none !important; 
}